
<template>
    <theme-box title="渠道券添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-select title="商户名称" :required="true" name="mchtId" :options="mchtList" :value.sync="mchtVal"></form-select>
                <form-select title="电子券名称" :required="true" name="couponId" :options="coupList" :value.sync="coupVal"></form-select>
                <form-input title="可发张数" :required="true" name="couponNum">
                    <div id="message">还剩<span style="color:red">{{over}}</span>张可发放</div>
                </form-input>
                <form-group title="图片" :required="false" v-ref:doc-img name="file">
                    <file-upload v-ref:fileupload class="fileImg"></file-upload>
                </form-group>
                <form-select title="渠道方名称" :required="true" name="channelId" :options="channelOptions"></form-select>
                <form-select title="使用类型" :required="true" name="type" :options="typeOptions"></form-select>
                <form-input title="跳转路径" :required="false" name="linkUrl"></form-input>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>
<style media="screen" scoped>
    #message{
        position:absolute;
        right:0
    }
</style>
<script>
    import 'plugins/jquery-validation';
    import 'lib/validatorByte.js';
    var serialize = require('form-serialize');


    export default {
        data: () => ({
            mchtVal:'',//监听商户值
            coupVal:'',//监听电子券值
            couponVal:'',//电子券的值
            over:'', //剩余张数
            mchtList: [],//商户列表
            coupList:[], //电子券列表
            respList:[],//返回数据列表
            channelOptions:[
                {key:"兴业",value:"CIB"},
                {key:"浦发",value:"SPDB"}
            ],
            typeOptions:[
                {key:"优惠出行",value:"travel"},
                {key:"优惠生活",value:"life"}
            ]
        }),
        watch:{
            async mchtVal(v){
                if(v != ''){
                    await this.$post({
                        url: "/api/v2" + projectName_Url + "/plat/channel/query_channel",
                        data:{mchtId:v},
                        method:"POST"
                    }).then(response => {
                        this.respList = response.content.couponList;
                        if(this.respList != '' && this.respList != null){
                            $('#message').css('display','block');
                            let name = this.respList.map(ele => {
                                return {
                                    key: ele.name,
                                    value:ele.couponId
                                };
                            });
                            this.$set("coupList", name);
                        }else{
                            this.respList = [];
                            this.$set("coupList", this.respList);
                            $('#message').css('display','none');
                        }
                    }, error => {});
                }
            },
            coupVal(v){
                //根据电子券显示剩余张数
                for(var i in this.respList){
                  if(v == this.respList[i].couponId)
                    this.over = this.respList[i].surplusnum

                }
            }

        },
        methods: {
            reset() {
                $("label.error").remove();
                this.$els.form.reset()
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/"+ mchtId,
                    method:"GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("mchtList", list);
                }, error => {});
            },
        },
        ready() {
            var self = this;
            self.getMcht();
            $(this.$els.form).validate({
                submitHandler: async function() {
                    var _data = serialize(this.currentForm, {
                        hash: true,
                        empty: true
                    });
                    let form = this.currentForm;
                    let formData = new FormData(form);
                    if(_data.couponNum > self.over){
                        Midway.alert({title: "操作提示", content: '可发放张数不能大于剩余张数'})
                        return
                    }
                    loading(true);
                    var result = await self.$post({
                        url: "/api/v2"+ projectName_Url +"/plat/channel/add",
                        data: formData
                    }).then(response => {
                        // loading(false);
                        let data = {
                            title: "操作成功",
                            content: "是否进入渠道券列表查看?"
                        }
                        self.reset()
                        Midway.confirm(data).then(function () {
                            self.$route.router.go('/channelCoupon/list');
                        }).catch(function(){
                            self.$post({
                                url: "/api/v2" + projectName_Url + "/plat/channel/query_channel",
                                data: {mchtId: self.$els.form.mchtId.value},
                                method: "POST",
                            }).then(response => {
                                self.respList = response.content.couponList;
                                if (self.respList != '' && self.respList != null) {
                                    $('#message').css('display', 'block');
                                    let name = self.respList.map(ele => {
                                        return {
                                            key: ele.name,
                                            value: ele.couponId
                                        };
                                    });
                                    console.log(name)
                                    self.$set("coupList", name);
                                } else {
                                    self.respList = [];
                                    self.$set("coupList", self.respList);
                                    $('#message').css('display', 'none');
                                }
                            })
                        })
                    }).then(() => loading(false)).catch(() => loading(false))
                },
                rules: {
                    mchtId: {
                        required: true
                    },
                    couponId:{
                        required: true
                    },
                    couponNum:{
                        required: true,
                        int:true,
                        min:1
                    },
                    linkUrl:{
                        required: false,
                        url:true
                    }

                },
            });
           $("select[name = 'mchtId']").change(function(){
              self.$post({
                   url: "/api/v2" + projectName_Url + "/plat/channel/query_channel",
                   data:{mchtId:self.$els.form.mchtId.value},
                   method:"POST"
               }).then(response => {
                  self.respList = response.content.couponList;
                   if(self.respList != '' && self.respList != null){
                       $('#message').css('display','block');
                       let name = self.respList.map(ele => {
                           return {
                               key: ele.name,
                               value:ele.couponId
                           };
                       });
                       self.$set("coupList", name);
                   }else{
                       self.respList = [];
                       self.$set("coupList", self.respList);
                       $('#message').css('display','none');
                   }
               }, error => {});
           })
        }
    }
</script>
